<template>
	<view>
		<uni-nav-bar :fixed="true" color="#333333" :background-color="themeBgColor" :border="false">
			<view class="input-view">
				<uni-icons type="search" size="22" color="#666666" />
				<input v-model="searchVal" confirm-type="search" class="input" type="text" placeholder="搜索应用" @confirm="search">
				<uni-icons :color="'#999999'" v-if="searchVal!==''" class="icon-clear" type="clear" size="22" @click="clear" />
			</view>
		</uni-nav-bar>
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item v-for="(item ,index) in info" :key="index">
				<view class="swiper-item">
					{{item.content}}
				</view>
			</swiper-item>
		</swiper>
		<uni-section title="我的工作台" type="line"></uni-section>
		<view class="grid-body">
			<uni-grid :column="4" :show-border="false" :square="false" :highlight="true" @change="runfunc">
				<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
					<view class="grid-item-box">
						<uni-icons :color="item.icocolor" :type="item.type" size="22"></uni-icons>
						<text class="text">{{ item.text }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import uniSection from '@/components/uni-section/uni-section.vue'
	import uniGrid from "@/components/uni-grid/uni-grid.vue"
	import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
	import uniBadge from '@/components/uni-badge/uni-badge.vue'
	import md5 from '@/common/lib/md5.min.js'
	export default {
		components: {
			uniIcons,
			uniNavBar,
			uniSection,
			uniGrid,
			uniGridItem,
			uniBadge,
		},
		computed: {
			...mapGetters(['themeBgColor', 'darkMode']),
		},
		data() {
			return {
				bgColor: '#FFFFFF',
				winHeight: "", // 窗口高度
				currentTab: 0, // 预设当前项的值
				scrollLeft: 0, // tab标题的滚动条位置
				searchVal: '',
				//swiper变量
				info: [{
					content: '内容 A'
				}, {
					content: '内容 B'
				}, {
					content: '内容 C'
				}],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				//我的工作台
				list: [{
						url: '/static/img/tabbar/home.png',
						text: '销货',
						badge: '0',
						type: "home",
						icocolor: "#ff0000",
					},
					{
						text: '进货',
						badge: '1',
						type: "paperclip",
						icocolor: "#0000ff",
					},
					{
						text: '退货',
						badge: '99',
						type: "chat",
						icocolor: "#ff007f",
					},
					{
						text: '商品',
						badge: '2',
						type: "download",
						icocolor: "#00ff7f",
					},
					{
						text: '图片',
						type: "flag",
						icocolor: "#005500",
					},
					{
						text: 'Grid 6',
						type: "gear",
						icocolor: "#aaff00",
					},
					{
						text: 'Grid 7',
						type: "star",
						icocolor: "#ffff00",
					},
					{
						text: 'Grid 8',
						type: "info",
						icocolor: "#aaff00",
					},
					{
						text: 'Grid 9',
						type: "scan",
						icocolor: "#00aa7f",
					}
				]
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t('ToDo')
			})
			this.setNavBarColor()
			this.setDarkMode()
		},
		watch: {
			themeBgColor() {
				this.setNavBarColor()
			},
			darkMode() {
				this.setDarkMode()
			}
		},
		onLoad() {
			//  高度自适应
			uni.getSystemInfo({
				success: res => {
					this.winHeight = res.windowHeight
					this.winWidth = res.windowWidth
				}
			})
		},
		onShow(e) {
			// setNavBar
			this.setNavBarColor()
			// pages
			let pages = getCurrentPages()
			let currPage = pages[pages.length - 1]
			if (currPage.isDoRefresh === true) {
				currPage.isDoRefresh = false
				this.search()
			}
		},
		methods: {
			setDarkMode() {
				this.darkMode ? uni.setTabBarStyle({
					backgroundColor: '#2a2b2d'
				}) : uni.setTabBarStyle({
					backgroundColor: '#ffffff'
				})
			},
			setNavBarColor() {
				// navBar-bg-color
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: this.themeBgColor,
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				})
			},
			search() {
				if (this.currentTab == 0) {
					this.$refs.auditProjectRef.queryByName(this.searchVal)
				} else if (this.currentTab == 1) {
					this.$refs.auditUserRef.queryByName(this.searchVal)
				}
			},
			clear() {
				this.searchVal = ''
				this.search()
			},
			async queryByName(name) {
				uni.showLoading({
					title: '正在查询数据...'
				})
				const res = await this.$minApi.listAuditUser()
				if (res.ok()) {
					this.cardList = res.data
				}
				uni.hideLoading()
			},
			updateQuery() {
				// 无效
				// if (this.mescroll !== null) {
				// 	this.downCallback(this.mescroll)
				// }
				this.queryByName()
			},
			//swiper
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.detail.value
			},
			durationChange(e) {
				this.duration = e.detail.value
			},
			//a
			runfunc(e) {
				let {
					index
				} = e.detail;
				if(index==0)
				{
					uni.navigateTo({
						url:"../sale/saleorder-list"
					});
				}
				else if(index==3)
				{
					uni.navigateTo({
						url:"../goods/mat-list"
					});
				}
				else if(index==4)
				{
					uni.navigateTo({
						url:"../example/image"
					});
				}
				uni.showToast({
					title: `点击第${index+1}个宫格`,
					icon: 'none',
				});
			}
		}
	}
</script>
<style>
	.grid-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}

	.grid-item-box {
		flex: 1;
		/* position: relative;
	*/
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
</style>
